<template>
  <div>
    <h1>本地的 todo list 代办清单</h1>
    <el-button @click="dialogFormVisible = true">创建</el-button>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="content" label="内容" width="600" />
    <el-table-column prop="date" label="时间" width="600" />
    <el-table-column fixed="right" label="操作">
      <template #default>
        <el-button type="danger" size="small" @click="handleClick"
          >删除</el-button
        >
        <el-button type="primary" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 标签弹窗 -->
  <el-dialog v-model="dialogFormVisible" title="添加待办">
    <el-form :model="form">
      <el-form-item label="内容" :label-width="formLabelWidth">
        <el-input size="mini" style="width:200px;"  v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="时间" :label-width="formLabelWidth">
        <el-date-picker
        :format="yyyy-mm-dd"
       :value-format="yyyy-mm-dd"
        style="width:200px;"
        v-model="form.time"
        type="date"
        placeholder="请选择时间"
        size="mini"
      />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="saveData">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
 

</template>

<script>

export default {
  name: 'AppViwe',
  components: {},
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: '',
        time:'',
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    saveData () {
      console.log("我拿到了",this.form)
    }
  }
}
</script>

  <style lang="less" scoped>
    /dep/ v-deep.el-table .cell{
      display: flex;
    }
  </style>
